<template>
  <div class="fenlei">
    <Headerfenlei
      ><span slot="back" class="back" @click="goback">返回</span>
      <span slot="home" class="home" @click="gohome">首页</span></Headerfenlei
    >
    <div class="box">
      <van-sidebar v-model="activeKey" @change="onChange" class="box2">
        <van-sidebar-item
          v-for="(item, index) in About"
          :key="index"
          :title="item.name"
        />
      </van-sidebar>
      <van-grid :border="false" :column-num="3" class="box1">
        <van-grid-item
          v-for="items in lists"
          :key="items._id"
          @click="godetail(items._id)"
        >
          <van-image :src="items.coverImg" class="imgcc" />
          <h5>{{ items.name }}</h5>
          <p>{{ items.price }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Grid, Sidebar, SidebarItem } from "vant";
import Headerfenlei from "../../components/Headerfenlei";
import { pdtc, pdtlist } from "../../api/pdtc";
Vue.use(Grid);
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  data() {
    return {
      activeKey: "",
      title: "",
      About: [],
      lists: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    //左侧导航接口渲染展示
    async init1() {
      const result = await pdtc({
        per: 6,
        page: 1,
      });
      this.About = this.list = result.categories;
    },
    godetail(id) {
      this.$router.push("/detail/" + id);
    },
    goback() {
      this.$router.back();
    },
    gohome() {
      this.$router.push("/home");
    },
    async getdata() {
      const result = await pdtlist(name);
      console.log(result);
      // this.About[0] = result.products[0];
      this.lists = result.products;
    },
    //左侧导航点击触发
    //123456
    async onChange(index) {
      const name = this.list[index].name;
      const result = await pdtlist(name);
      this.lists = result.products;
    },
  },
  created() {
    this.init1();
    this.getdata();
  },
  mounted() {},
  components: {
    Headerfenlei,
  },
};
</script>
<style scoped>
.box {
  display: flex;
}
.box h3,
p {
  width: 60px;
  font-size: 16px;
  overflow: hidden;
}
.box .box1 {
  width: 80%;
}
.box .box2 {
  width: 20%;
}
.imgcc {
  width: 60px;
  height: 60px;
}
</style>